<template>
	<view class="wrapper">
		<head-title showLeftButton="true" titleText="购买VIP"></head-title>
		<swiper previous-margin="30px" next-margin="30px" :circular="true" class="swiper" :autoplay="true" :interval="5000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<view class="box flex_col">
						<text>当月赠送礼物达到15元</text>
						<text>即可成为60天会员</text>
					</view>
					<image src="https://yp.6vx.com/data/sys_img/other_img/card2.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="box flex_col">
						<text>当月赠送礼物达到10元</text>
						<text>即可成为30天会员</text>
					</view>
					<image src="https://yp.6vx.com/data/sys_img/other_img/card1.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<view class="box flex_col">
						<text>当月赠送礼物达到30元</text>
						<text>即可成为180天会员</text>
					</view>
					<image src="https://yp.6vx.com/data/sys_img/other_img/card3.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="cont">
			<view class="title">
				<view>购买VIP</view>
			</view>
			<view @tap="bindList(index,item.id)" :class="{on:select==index}" v-for="(item,index) in listArr" :key="index" class="list flex_row">
				<view>{{item.vip_titel}}</view>
				<view>{{item.vip_price}} RMB</view>
				<image v-if="select==index" src="../../static/image/selectOn.png" mode="aspectFill"></image>
			</view>
		</view>
		<view @tap="bindPay" class="btn">确认开通</view>
	</view>
</template>

<script>
	import headTitle from "../../components/headTitle.vue";
	import common from '../../common/network.js';
	var session = '';
	export default {
		components:{headTitle},
		data(){
			return{
				listArr:[
					{'name':'1天','num':'1'},
					{'name':'1周','num':'5'},
					{'name':'1个月','num':'12'}
				],select:0,
				v_id:'',
			}
		},
		onLoad:function(options){
			var that = this;
			if(options.session!=undefined){
				session = options.session;
				this.getMsg();
			}
		},
		methods:{
			bindList:function(index,id){
				console.log(id)
				this.select = index;
				this.v_id = id;
			},
			getMsg:function(){
				var that = this;
				var $data = {
					'type':'zvip_vip_index',
					'session':session,
				};
				common.network.request($data,function(res){
					console.log(res);
					var list = res.vip_model;
					that.v_id = list[0].id;
					that.listArr = list;
				})
			},
			bindPay:function(){
				var $data = {
					'type':'zpay_recharge_pay',
					'session':session,
					'vm_id':this.v_id,
				};
				common.network.request($data,function(res){
					uni.requestPayment({
						"timeStamp": (res.timeStamp).toString(),
						"nonceStr": res.nonceStr,
						"signType":"MD5",
						"package": res.package,
						"paySign": res.paySign,
						success:function(res){
							uni.showToast({
								icon:"success",
								title:'开通成功',
								success:function(){
									uni.navigateBack({
										
									})
								}
							})
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	.wrapper{
		background: #F9F9F9;
		height: 100vh;
	}
	.swiper{
		width: 100%;
		height: 300px;
		padding: 34px 0;
	}
	.swiper-item{
		width: 100%;
		padding: 0 14px;
		box-sizing: border-box;
		position: relative;
	}
	.box{
		position: absolute;
		top: 86px;
		left: 0;
		width: 100%;
		color: #fff;
		font-size: 32px;
		line-height: 54px;
	}
	.swiper image{
		width: 100%;
		height: 300px;
		border-radius: 20px;
	}
	.cont{
		padding: 30px 70px 50px 70px;
	}
	.title{
		color: #87879F;
		font-size: 34px;
		position: relative;
		text-align: center;
		margin-bottom: 50px;
	}
	.title:after{
		content: '';
		height: 1px;
		width: 100%;
		background: #E1E1E1;
		position: absolute;
		top: 50%;
		left: 0;
	}
	.title view{
		display: inline-block;
		padding: 0 36px;
		background: #F9F9F9;
		position: relative;
		z-index: 2;
	}
	.list{
		border: 1px solid #E1E1E1;
		padding: 20px 0;
		border-radius: 10px;
		margin-bottom: 30px;
		position: relative;
		overflow: hidden;
	}
	.list.on{
		border-color: #6278FF;
		transition: all 0.4s;
	}
	.list view{
		padding: 6px 0;
	}
	.list view:first-of-type{
		border-right: 1px solid #E1E1E1;
		width: 90px;
	}
	.list view{
		padding: 10px 70px;
	}
	.list image{
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.btn{
		background: linear-gradient(to right,#AE33F6,#6673FF);
		color: #fff;
		line-height: 100px;
		text-align: center;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 34px;
	}
	.btn:active{
		background: linear-gradient(to right,#6673FF,#AE33F6);
	}
</style>
